<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <title>商品分类</title>
    <meta name="keywords" content="商品分类" />
    <meta name="description" content="商品分类" />

    <link rel="stylesheet" href="${base}/static/css/mui.css" />
    <link rel="stylesheet" href="${base}/static/css/font/iconfont.css" />
    <link rel="stylesheet" href="${base}/static/css/product.css" />
</head>

<body class="bgcolor12">
<div class="contbox">
    <div class="mui-content">

        <!--logo部分-->
        <div class="mui-row">
            <div class="mui-col-xs-12 logo-box clear-fix">
                <img src="${base}/static/img/logo_04.png" /><span>健维商城</span>
            </div>
        </div>
        <!--搜索框部分-->
        <div class="mui-row" style="background: #fff;">
            <div class="mui-col-xs-12 searchbox">
                <div class="searchbox1">
                    <input type="search" placeholder="搜索商品" id="goodsSch" value="${gsName!""}"/>
                    <i id="searchBtn" class="mui-icon mui-icon-search"></i>
                </div>
            </div>
        </div>
        <!--搜索框部分-->
        <!--产品内容部分-->
        <div class="mui-row">
            <div class="mui-col-xs-12 productbox clear-fix">
                <!--产品内容左边部分-->
                <div class="mui-scroll-wrapper mui-scroll-wrapperss js-nav-wrap">
                    <div id="scrollbox" class="mui-scroll">
                        <div class="scrollnav">现场服务</div>
                        <div>员工福利</div>
                    </div>
                </div>
                <!--产品内容左边部分-->
                <!--产品内容右边部分-->
                <div class="productbox-right clear-fix">
                    <div class="shoplist1" style="display: block;">
                        <% for(goods in gsA) {%>
                        <div id="${goods.goodsId}" class="productboxlist">
                            <img src="${base}${goods.imgUrl}" />
                            <h5>${goods.goodsName}</h5>
                            <div class="price clear-fix">
                                <span>¥${goods.price/100}</span>
                                <span>购买</span>
                            </div>
                        </div>
                        <% } %>

                        <!--已经到底部了-->
                        <div style="clear: both;"></div>
                        <div class="daodibulabox clear-fix">
                            <img src="${base}/static/img/img_10.png" />
                        </div>
                        <!--已经到底部了-->
                    </div>
                    <div class="shoplist1">
                        <% for(goods in gsB) {%>
                        <div id="${goods.goodsId}" class="productboxlist">
                            <img src="${base}${goods.imgUrl}" />
                            <h5>${goods.goodsName}</h5>
                            <div class="price clear-fix">
                                <span>¥${goods.price/100}</span>
                                <span>购买</span>
                            </div>
                        </div>
                        <% } %>

                        <!--已经到底部了-->
                        <div style="clear: both;"></div>
                        <div class="daodibulabox clear-fix">
                            <img src="${base}/static/img/img_10.png" />
                        </div>
                        <!--已经到底部了-->
                    </div>

                </div>
                <!--产品内容右边部分-->

            </div>
        </div>
        <!--产品内容部分-->
        <!--占位置高度-->
        <div style="height: 75px;"></div>
        <!--占位置高度-->
        <div class="mui-row">
            <!--底部nav部分-->
            <nav id="bottomNav" class="mui-bar mui-bar-tab footer-tab-nav">
                <a class="mui-tab-item">
                    <span class="mui-icon"><i class="icons-font icon-shop"></i></span>
                    <span class="mui-tab-label">商城首页</span>
                </a>
                <a class="mui-tab-item mui-active">
                    <span class="mui-icon"><i class="icons-font icon-classify"></i></span>
                    <span class="mui-tab-label">产品分类</span>
                </a>
                <a class="mui-tab-item">
                    <span class="mui-icon"><i class="icons-font icon-personal"></i></span>
                    <span class="mui-tab-label">个人中心</span>
                </a>
            </nav>
            <!--底部nav部分-->
        </div>
    </div>
</div>

<script src="${base}/static/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/static/js/mui.js"></script>
<script type="text/javascript" charset="utf-8">
    $(function () {

        $('#bottomNav a').each(function (r, v) {
            switch (r) {
                case 0:
                    $(this).bind('tap', function () {
                        mui.openWindow({
                            url: '${base}/front/shop/home.do',
                            id: 'shop'
                        });
                    });
                    break;
                case 1:
                    $(this).bind('tap', function () {
                        mui.openWindow({
                            url: '${base}/front/goods/home.do',
                            id: 'goods'
                        });
                    });
                    break;
                case 2:
                    $(this).bind('tap', function () {
                        mui.openWindow({
                            url: '${base}/front/personal/home.do',
                            id: 'personal'
                        });
                    });
                    break;
            }
        });

        mui('.mui-scroll-wrapper').scroll({
            scrollY: true, //是否竖向滚动
            scrollX: false, //是否横向滚动
            startX: 0, //初始化时滚动至x
            startY: 0, //初始化时滚动至y
            indicators: false, //是否显示滚动条
            deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
            bounce: true //是否启用回弹
        });
        //产品类别切换
        var scrollbox = document.getElementById("scrollbox");
        var odiv = scrollbox.getElementsByTagName("div");
        var shoplist1 = document.getElementsByClassName("shoplist1");

        for(var a = 0; a < odiv.length; a++) {
            odiv[a].index = a;
            odiv[a].onclick = function() {
                for(var b = 0; b < shoplist1.length; b++) {
                    odiv[b].className = '';
                    shoplist1[b].style.display = 'none';
                }
                this.className = 'scrollnav';
                shoplist1[this.index].style.display = "block";

            }
        };

        var productboxlist = document.getElementsByClassName("productboxlist");
        for(var a = 0; a < productboxlist.length; a++) {
            productboxlist[a].addEventListener('tap', function() {
                mui.openWindow({
                    url: '${base}/front/goods/detailInfo.do?pid='+this.id,
                    id: 'goods_detail',
                    show: {
                        autoShow: true,
                        duration: 1000,
                        event: 'titleUpdate'
                    }
                });
            });
        };

        $('#searchBtn').on('click', function () {
            var gsName = $('#goodsSch').val();
            window.location.href = '${base}/front/goods/home.do?gsName='+gsName;
        });
    });

</script>
</body>

</html>
